/*
 * @Description:开通会员页面
 * @Author: iamsmiling
 * @Date: 2021-06-11 21:22:06
 * @LastEditTime: 2021-06-12 10:27:41
 */
import 'package:credit_business_circle/R/R.dart';
import 'package:credit_business_circle/components/end_tail/end_tail.dart';
import 'package:credit_business_circle/domain/local/pay/pay_entity.dart';
import 'package:credit_business_circle/domain/local/vip/vip_entity.dart';
import 'package:credit_business_circle/pages/mine/children/vip/vip_card/vip_card.dart';
import 'package:credit_business_circle/pages/mine/children/vip/vip_card/vip_rule_card.dart';
import 'package:credit_business_circle/pages/mine/children/vip/vip_controller.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';

class VipPage extends GetView<VipController> {
  const VipPage({Key? key}) : super(key: key);
  Future showRechargeModal(BuildContext context) {
    return showCupertinoModalPopup(
        context: context,
        builder: (BuildContext conext) {
          return Material(
            color: R.color.ffffffff,
            shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.only(
              topLeft: Radius.circular(R.dimen.sp10),
              topRight: Radius.circular(R.dimen.sp10),
            )),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              mainAxisSize: MainAxisSize.min,
              children: [
                Container(
                  padding: EdgeInsets.only(
                      top: R.dimen.dp20,
                      left: R.dimen.dp18,
                      right: R.dimen.dp18),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    mainAxisSize: MainAxisSize.min,
                    children: [
                      Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: [
                          Text(
                            "购买",
                            style: TextStyle(
                                fontSize: R.dimen.sp15,
                                color: R.color.ff002223),
                          ),
                          GestureDetector(
                              onTap: Get.back,
                              child: Image.asset(R.image.closeModal))
                        ],
                      ),
                      Container(
                        margin: EdgeInsets.only(
                            top: R.dimen.dp28, bottom: R.dimen.dp20),
                        child: Column(
                          children: [
                            Container(
                              // margin: EdgeInsets.only(bottom: R.dimen.dp12),
                              child: Row(
                                mainAxisAlignment:
                                    MainAxisAlignment.spaceBetween,
                                children: [
                                  Text(
                                    "VIP月卡",
                                    style: TextStyle(
                                        fontSize: R.dimen.sp17,
                                        color: R.color.ff111111),
                                  ),
                                  Text(
                                    "298元",
                                    style: TextStyle(
                                        color: R.color.ffff534b,
                                        fontSize: R.dimen.sp20,
                                        fontWeight: FontWeight.w600),
                                  )
                                ],
                              ),
                            ),
                            Divider(),
                          ],
                        ),
                      ),
                    ],
                  ),
                ),
                Container(
                  margin: EdgeInsets.only(left: R.dimen.dp18),
                  child: Text(
                    "选择支付方式",
                    style: TextStyle(
                        fontSize: R.dimen.sp15,
                        color: R.color.ff111111,
                        fontWeight: FontWeight.w600),
                  ),
                ),
                for (PayEntity p in controller.channels)
                  Container(
                    margin: EdgeInsets.only(left: R.dimen.dp18),
                    child: Row(
                      children: [
                        SizedBox(
                          width: R.dimen.dp24,
                          height: R.dimen.dp24,
                          child: Checkbox(
                            value: true,
                            materialTapTargetSize:
                                MaterialTapTargetSize.shrinkWrap,
                            tristate: true,
                            side: BorderSide(
                              color: R.color.ffcccccc,
                            ),
                            shape: RoundedRectangleBorder(
                                borderRadius:
                                    BorderRadius.circular(R.dimen.sp9)),
                            onChanged: (bool? flag) {
                              // _.selectReason(flag, item);
                            },
                            activeColor: R.color.ff00c28a,
                          ),
                        ),
                        Expanded(
                          child: Container(
                            margin: EdgeInsets.only(left: R.dimen.dp25),
                            decoration: BoxDecoration(
                                border: Border(
                                    bottom: BorderSide(
                                        width: .5,
                                        color: p == controller.channels.last
                                            ? R.color.transparent
                                            : R.color.ffdddddd))),
                            padding:
                                EdgeInsets.symmetric(vertical: R.dimen.dp20),
                            child: Row(
                              children: [
                                Container(
                                    padding:
                                        EdgeInsets.only(right: R.dimen.dp20),
                                    child: Image.asset(p.icon)),
                                Container(
                                  child: Text.rich(TextSpan(
                                      text: "${p.label}",
                                      style: TextStyle(
                                          fontSize: R.dimen.sp16,
                                          color: R.color.ff333333),
                                      children: [
                                        TextSpan(
                                            text: "${p.description}",
                                            style: TextStyle(
                                                color: R.color.ff999999,
                                                fontSize: R.dimen.sp13))
                                      ])),
                                )
                              ],
                            ),
                          ),
                        )
                      ],
                    ),
                  ),
                Container(
                  margin: EdgeInsets.only(
                      top: R.dimen.dp10,
                      left: R.dimen.dp18,
                      right: R.dimen.dp18,
                      bottom: R.dimen.dp16),
                  child: ElevatedButton(
                    style: ButtonStyle(
                        backgroundColor:
                            MaterialStateProperty.all(R.color.ff00c28a),
                        shape: MaterialStateProperty.all(RoundedRectangleBorder(
                            borderRadius: BorderRadius.circular(R.dimen.sp5)))),
                    onPressed: Get.back,
                    child: Text("确认支付298元"),
                  ),
                ),
              ],
            ),
          );
        });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: CustomScrollView(
        physics: ClampingScrollPhysics(),
        slivers: [
          SliverAppBar(
            backgroundColor: R.color.transparent,
            iconTheme: IconThemeData(color: R.color.ffffffff),
            expandedHeight: R.dimen.dp154,
            title: Text(
              "购买会员",
              style: TextStyle(
                  fontSize: R.dimen.sp16,
                  color: R.color.ffffffff,
                  fontWeight: FontWeight.w600),
            ),
            pinned: true,
            floating: true,
            primary: true,
            // snap: true,
            flexibleSpace: Stack(
              alignment: AlignmentDirectional.center,
              children: [
                Image.asset(
                  R.image.vipMask,
                  fit: BoxFit.cover,
                  width: R.dimen.width,
                ),
                Positioned(
                  top: kToolbarHeight + R.dimen.dp48,
                  child: Column(
                    mainAxisSize: MainAxisSize.min,
                    crossAxisAlignment: CrossAxisAlignment.center,
                    children: [
                      Image.asset(R.image.vipCrown),
                      Container(
                        margin: EdgeInsets.only(top: R.dimen.dp12),
                        child: Row(
                          mainAxisAlignment: MainAxisAlignment.center,
                          children: [
                            Image.asset(R.image.vipRightBar),
                            Container(
                                margin: EdgeInsets.symmetric(
                                    horizontal: R.dimen.dp20),
                                child: Image.asset(R.image.vipDesc)),
                            Image.asset(R.image.vipLeftBar)
                          ],
                        ),
                      ),
                    ],
                  ),
                )
              ],
            ),
          ),
          SliverToBoxAdapter(
            child: Container(
              decoration: BoxDecoration(
                  image: DecorationImage(
                      fit: BoxFit.fitWidth,
                      image: AssetImage(R.image.vipMask))),
              child: Column(
                children: [
                  GetBuilder<VipController>(builder: (_) {
                    return Stack(
                      children: [
                        Image.asset(
                          R.image.vipMask,
                          width: R.dimen.width,
                          fit: BoxFit.fill,
                        ),
                        ClipRRect(
                          borderRadius: BorderRadius.only(
                              topLeft: Radius.circular(R.dimen.sp13),
                              topRight: Radius.circular(R.dimen.sp13)),
                          child: Container(
                            // height: R.dimen.height,
                            color: R.color.ffffffff,
                            padding:
                                EdgeInsets.symmetric(horizontal: R.dimen.dp14),
                            width: R.dimen.width,
                            child: Column(
                              children: [
                                Container(
                                  margin: EdgeInsets.only(top: R.dimen.dp25),
                                  child: Row(
                                    mainAxisAlignment:
                                        MainAxisAlignment.spaceAround,
                                    children: [
                                      for (VipEntity vip in _.options)
                                        VipCard(
                                            vip: vip,
                                            width: (R.dimen.width -
                                                    R.dimen.dp14 * 2 -
                                                    R.dimen.dp12 * 2 -
                                                    R.dimen.dp2 * 6) /
                                                3.0001,
                                            color: vip.type == _.vipType
                                                ? R.color.fffef6df
                                                : R.color.ffffffff,
                                            borderColor: vip.type == _.vipType
                                                ? R.color.ffdbc188
                                                : R.color.ffe5e5e5)
                                    ],
                                  ),
                                ),
                                GestureDetector(
                                  onTap: () => showRechargeModal(context),
                                  child: Container(
                                    margin: EdgeInsets.only(
                                        top: R.dimen.dp28,
                                        bottom: R.dimen.dp36),
                                    width: R.dimen.width - R.dimen.dp14 * 2,
                                    alignment: Alignment.center,
                                    padding: EdgeInsets.symmetric(
                                        vertical: R.dimen.dp16),
                                    decoration: BoxDecoration(
                                        borderRadius:
                                            BorderRadius.circular(R.dimen.sp34),
                                        gradient: LinearGradient(colors: [
                                          R.color.fff7df9f,
                                          R.color.fff0c06c,
                                        ])),
                                    child: Text(
                                      "立即开通",
                                      style: TextStyle(
                                          fontSize: R.dimen.sp19,
                                          color: R.color.ff865616,
                                          fontWeight: FontWeight.w600),
                                    ),
                                  ),
                                ),
                                VipRuleCard(),
                                EndTail(
                                  tip: "更多权益，敬请期待",
                                ),
                              ],
                            ),
                          ),
                        )
                      ],
                    );
                  }),
                ],
              ),
            ),
          )
        ],
      ),
    );
  }
}
